<template>
  <div class="awards-list-box">
    <van-list>
      <div class="table-header">
        <van-row>
          <van-col span="2">序号</van-col>
          <van-col span="12">获奖时间</van-col>
          <van-col span="6">奖品名称</van-col>
          <van-col span="4">状态</van-col>
        </van-row>
      </div>
      <div class="table-body">
        <van-row v-for="(e, i) in list" :key="e.id" @click="onClick(e)">
          <van-col span="2">{{ i+1 }}</van-col>
          <van-col span="12">{{ e.awardsTime }}</van-col>
          <van-col span="6">{{ e.awardName }}</van-col>
          <van-col span="4">{{ e.status }}</van-col>
        </van-row>
      </div>
    </van-list>

    <takeAwardVue ref="takeAwardVueRef"></takeAwardVue>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getAwardsInfoByTask } from '@/api/task'
import dayjs from 'dayjs'
import takeAwardVue from './takeAward.vue';

const taskId = localStorage.getItem('taskId')
const userId = localStorage.getItem('token')
const list:any = ref([]);
const takeAwardVueRef = ref();

onMounted(() => {
  getList()
})

function onClick(e: any) {
  if (e.status != '未领取') return false;
  takeAwardVueRef.value.open()
}

function getList() {
  getAwardsInfoByTask({taskId, userId}).then((res: any) => {
    if (res.code == 200) {
      list.value = res.data.map((e: any) => {
        if (e.awardsTime) {
          e.awardsTime = dayjs(e.awardsTime).format('YYYY-MM-DD HH:mm:ss')
        }
        return e;
      })
    }
  })
}

</script>

<style scoped lang="less">
.awards-list-box{
  text-align: center;
  font-size: 14px;

  .table-header{
    padding: 10px;
    font-weight: bold;
    background-color: #f8f8f8;

    .van-row{
      padding: 5px 0;
    }
  }

  .table-body {
    padding: 0 10px;

    .van-row {
      border-bottom: 1px solid #eee;
      padding: 5px 0;
    }
  }
  
}
</style>